<template>
  <div class="demo">
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{ age }}</h2>
<h2>当前求和为{{number}}</h2>
<button @click="numup">点我number++</button>
<button @click="sendStudentName">把学生名给App</button>
<button @click="unbind">解绑atguigu事件</button>
<button @click="death">销毁当前Student组件实例(vc)</button>
  </div>
</template>

<script>
export default {
name:'Student',
data(){
    return {
        name:'luoyu',
        age:18,
        number:1
    }
},
methods:{
    sendStudentName(){
        // 触发Student实例对象上的atguigu事件
        this.$emit('atguigu',this.name,1,2,3,4)//后面可以连续解参数
        this.$emit('demo')
    },
    unbind(){
        this.$off('atguigu')//解绑一个自定义事件
        // this.$off(['atguigu','demo'])//解绑多个自定义事件
        // this.$off()//解绑所有自定义事件
    },
    numup(){
        console.log("这里与Vue组件无关的被调用了");
        this.number++
    },
    death(){
        this.$destroy()//销毁当前Student组件实例(vc),销毁后所有的Student实例的自定义事件全都不奏效了
    }
}
}
</script>

<style scoped>
.demo{
    background-color: pink;
}
</style>